<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :inline="false"
        :model="formInline"
        ref="template-add-form"
        :rules="formRules"
        class="demo-form-inline"
        v-loading="loadingForm"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="姓名:" prop="name">
              <el-input
                v-model="formInline.name"
                class="cell-input"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="手机号:" prop="phone">
              <el-input
                v-model="formInline.phone"
                class="cell-input"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="台餐卡号:" prop="mealCardNumber">
              <el-input
                v-model="formInline.mealCardNumber"
                class="cell-input"
                placeholder="请输入台餐卡号"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
let _this,
  updataInformation = () => {},
  addInformation = () => {},
  findInformation = () => {};
export default {
  data() {
    return {
      title: "",
      id: null,
      dialogVisible: false,
      formRules: {
        name: {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
        phone: {
          required: true,
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的11位数手机号",
          trigger: "blur",
        },
        mealCardNumber: {
          required: true,
          pattern: /^\d+$/,
          message: "请输入正确的台餐卡号",
          trigger: "blur",
        },
      },
      formInline: {},
      loadingScreen: null,
      loadingForm: false,
      fileName: "",
      btnLoading: false,
    };
  },
  methods: {
    async init(id) {
      try {
        _this = this;
        this.title = "";
        this.resetFrom();
        this.dialogVisible = true;
        if (!id) return (this.title = "新增");
        this.title = "修改";
        this.loadingForm = true;
        let res = await findInformation(id);
        this.loadingForm = false;
        this.formInline.id = id;
        Object.keys(this.formInline).forEach((item) => {
          this.formInline[item] = res.data[item];
        });
      } catch (e) {
        this.loadingForm = false;
        //TODO handle the exception
      }
    },
    resetFrom() {
      this.formInline = {
        name: "",
        phone: "",
        mealCardNumber: "",
      };
      if (this.$refs["template-add-form"])
        this.$refs["template-add-form"].resetFields();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSubmit() {
      this.$refs["template-add-form"].validate(async (valid) => {
        try {
          if (valid) {
            let res;
            this.btnLoading = true;
            if (!this.formInline.id) {
              res = await addInformation(this.formInline);
              this.$message.success("添加成功");
            } else {
              res = await updataInformation(this.formInline);
              this.$message.success("更新成功");
            }
            this.btnLoading = false;
            this.dialogVisible = false;
            this.$emit("success");
          }
        } catch (e) {
          console.log("查看捕获的错误：", e);
          this.btnLoading = false;
        }
      });
    },
  },
  created() {
    this.resetFrom();
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: left;
}

.width100 {
  width: 590px;
}

.cell-input {
  width: 330px;
}

.up-file-wrappar {
  display: flex;
  align-items: center;
}

.total-day {
  display: inline-block;
  height: 36px;
  width: 40px;
  margin: 0 6px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  box-sizing: border-box;
}

.up-file-name {
  display: inline-block;
  height: 36px;
  min-width: 555px;
  text-align: left;
  line-height: 36px;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: inherit;

  .text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1; //行数
    -webkit-box-orient: vertical;
    max-width: 555px;
  }
}
</style>
